<template>

  <div style="background-color: rgb(244, 244, 244)">
    
<!-- 头部 -->
    <van-sticky>
      <van-nav-bar
        title="不凡"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id"
        ><img :src="item.img_url" alt=""
      /></van-swipe-item>
    </van-swipe>

    <div class="kuai">
      <div><span class="quan"></span>30天无忧退货</div>
      <div><span class="quan"></span>48小时快速退款</div>
      <div><span class="quan"></span>满88元免邮费</div>
    </div>

    <!-- 日式和风懒人沙发 -->

    <div class="price">
      <p class="p1">{{ name }}</p>
      <p class="p2">{{ jieshao }}</p>
      <p class="p3">￥{{ price }}</p>
    </div>

    <!-- 选择数量 -->

    <van-cell is-link @click="showPopup">请选择规格数量</van-cell>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div
        style="
          display: flex;
          margin: 15px 0 0 15px;
          position: relative;
          margin-bottom: 18px;
        "
      >
        <img :src="logo2" alt=""/>
        <p class="p4">价格￥{{ price }}</p>
        <p class="p5">请选择数量</p>
      </div>
      <p class="p6">数量</p>
      <van-button icon="plus" type="primary" />
    </van-popup>

    <!-- 商品参数 -->
    <div class="canshu">
      <div class="herder">商品参数</div>
      <div class="content" v-for="item in content" :key="item.id">
        <div class="p7">{{ item.name }}</div>
        <div class="p8">{{ item.value }}</div>
      </div>
    </div>

    <!-- 产品展示 -->
    <div class="msg" v-html="msg"></div>

    <!-- 常见问题 -->
    <div class="problem">
      <div class="line"></div>
      <div class="title">常见问题</div>
      <div class="line"></div>
    </div>

    <div class="problem-demo">
      <div class="demo-1" v-for="item in problem" :key="item.id">
        <p class="p-1"><span class="dian"></span>{{ item.question }}</p>
        <p class="p-2">{{ item.answer }}</p>
      </div>
    </div>

    <!-- 大家都在看 -->
    <div class="problem">
      <div class="line"></div>
      <div class="title">大家都在看</div>
      <div class="line"></div>
    </div>

    <!-- 产品展示 -->

    <div class="chanpin">
      <div class="logo" v-for="item in logo" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p class="p-3">{{ item.name }}</p>
        <p class="p-4">￥{{ item.retail_price }}</p>
      </div>
    </div>
<div style="height:100px;"></div>
    <!-- 购物车底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon :icon="icon" :text="text" @click="an"  color="#ff5000"   />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>




  </div>
</template>

    <script>
import { goods } from "@/api/goods/index.js";
import {goodsList} from "@/api/category/list/goodsList";
import {addkeep} from "@/api/my/addkeep.js";
import {keep}from "@/api/my/keep.js";
export default {
  data() {
    return {
      list: [],
      name: "",
      jieshao: "",
      price: "",
      show: false,
      content: [],
      msg: "",
      problem: [],
      logo: [],
      icon:"star-o",
      text:"未收藏",
      logo2:"",
    };
  },
  computed: {},
 async created() {
    var result = await goods({
      id:  this.$route.params.id2,
      openId: localStorage.getItem("openId"),
    })
      console.log(result);
      this.list = result.gallery;
      this.name = result.info.name;
      this.jieshao = result.info.goods_brief;
      this.price = result.info.retail_price;
      this.content = result.attribute;
      this.msg = result.info.goods_desc;
      this.problem = result.issue;
      this.logo = result.productList;
      this.logo2 = result.info.primary_pic_url;
console.log(result.info.primary_pic_url);

  keep({
      openId: localStorage.getItem("openId")
  }).then((res)=>{
    console.log(res);
    var  arr = res.collectGoodsList.some(arr=>{if (arr.id==this.$route.params.id2) {
      return  true
    }})
    if (arr) {
      this.text="已收藏";
      this.icon="star"
      this.color="#ff5000" 
    }else{
      this.text="未收藏";
      this.icon="star-o"
    }
  })

  },
  mounted() {},
  methods: {
    showPopup() {
      this.show = true;
    },

    onClickLeft() {
      
      this.$router.go(-1);
    },

   async an(){
      var newid = await addkeep({

      goodsId:this.$route.params.id2,
      openId: localStorage.getItem("openId"),
    })


    console.log(newid);
    if (this.icon==="star-o") {
      this.icon ="star";
      this.text = "已收藏";
    }else if (this.icon==="star") {
      this.icon ="star-o";
      this.text = "未收藏";
      addkeep(
        {
          goodsId:this.$route.params.id2,
      openId: localStorage.getItem("openId"),
        }
      ).then((res)=>{

      })
    }




    },
  
  },
};
</script>
<style >
.msg {
  width: 100%;
}
.msg img {
  width: 100%;
}
</style>
    <style scoped lang="scss">
.my-swipe {
  height: 376px;
 
  img {
    width: 100%;
  }
}

.kuai {
  height: 50px;
  //   background-color: rgb(244, 244, 244);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  .quan {
    background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
      0 no-repeat;
    background-size: 5px;
    padding-left: 7.5px;
    align-items: center;
  }
  div {
    margin-top: 12px;
  }
}

.price {
  height: 155px;
  background-color: #fff;
  .p1 {
    color: #000;
    font-size: 20px;
    margin: 20px 0;
    padding: 10px;
  }
  .p2 {
    color: #999;
    font-size: 12px;
    margin: 12px 0 12px;
  }
  .p3 {
    color: #b4282d;
    font-size: 17px;
    margin: 5px 0 17px;
  }
}
.van-popup {
  img {
    width: 89px;
    height: 89px;
  }
  .p4 {
    position: absolute;
    color: #b4282d;
    font-size: 12px;
    left: 103px;
    top: 7px;
  }
  .p5 {
    color: #000;
    font-size: 12px;
    margin: 50px 0 0 15px;
  }
  .p6 {
    color: #000;
    font-size: 12px;
    text-align: left;
    margin-left: 15px;
  }
}
.canshu {
  //   height: 262px;
  background-color: #fff;
  margin: 10px 0 10px;
  padding: 10px 15px;
  .herder {
    width: 345px;
    height: 45px;
    font-size: 19px;
    color: #000;
    padding: 10px 0;
    text-align: left;
  }
  .content {
    line-height: 37px;
    display: flex;
    width: 325px;
    height: 37px;
    margin: 10px;
    background-color: rgb(244, 244, 244);
    // p {
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    //   white-space: nowrap;
    // }
    .p7 {
      width: 67px;
      height: 27px;
      color: #999;
      font-size: 12px;
      text-align: left;
    }
    .p8 {
      width: 258px;
      height: 27px;
      text-align: left;

      color: #000;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.problem {
  height: 51px;
  background-color: #fff;
  display: flex;
  text-align: center;
  line-height: 51px;
  justify-content: center;
  color: #000;

  .line {
    margin: 0 auto;
    margin-top: 25px;
    width: 50px;
    height: 0.5px;
    background-color: #ccc;
  }
}

.problem-demo {
  height: 292px;
  background-color: #fff;
  padding: 0 15px;
  margin-bottom: 40px;

  .demo-1 {
    width: 345px;
    height: 62px;
    text-align: left;
    padding-bottom: 12.5px;
    .dian {
      display: inline-block;
      width: 4px;
      height: 4px;
      background-color: #b4282d;
      border-radius: 50%;

      margin-bottom: 3px;
      margin-right: 3px;
    }
    .p-1 {
      color: #303030;
      font-size: 13px;
      margin: 0;
      padding: 0 0 7.5px 4px;
    }
    .p-2 {
      color: #787878;
      font-size: 13px;
      padding: 0 0 0 8px;
      margin: 0;
    }
  }
}

.chanpin {
  margin: 0 5px 0 5px;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .logo {
    width: 180px;
    height: 215px;
    background-color: #fff;
    margin: 0 0 5px;
    padding: 0 0 5px;

    img {
      width: 151px;
      height: 151px;
    }
    .p-3 {
      color: #000;
      text-align: left;
      margin: 12px 0 2.5px 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .p-4 {
      color: #9c3232;
      text-align: left;
      margin: 12px 0 2.5px 15px;
    }
  }
}
</style>
